<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Buttons</title>

  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/button/new/style.css" media="screen" />

  <style type="text/css" id="demo-css">
    HTML,
    BODY
    {
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .DemoBlock
    {
      border: 1px solid #D0D0D0;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
      border-radius: 3px;
      padding: 15px;
      margin: 0 0 .5em 10px;
      overflow: hidden;
      position: relative;
    }
    .DemoBlock H2
    {
      font-size: 80%;
      font-weight: normal;
      background: #EEE;
      margin: -15px -15px 10px -15px;
      padding: 2px;
      text-align: center;
    }

    .imageLeft .Basis-Button-Caption
    {
      background: url(button_image.png) no-repeat left center;
      padding-left: 20px;
    }

    .imageRight .Basis-Button-Caption
    {
      background: url(button_image.png) no-repeat right center;
      padding-right: 20px;
    }

    .imageOnly .Basis-Button-Caption
    {
      background: url(button_image.png) no-repeat center center;
      padding-left: 16px;
      text-indent: -100ex;
    }

    .fixedWidthButton
    {
      width: 50%;
    }

    .big
    {
      font-size: 300%;
    }

  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY
    {
      font-size: x-small;
    }
  </style>
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis-all.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basic demos: Buttons</h1>
  
  <p id="demo-summary">
    ..
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"></div>

  <script type="text/javascript" id="demo-javascript">
    
    // import names
    var DOM = basis.dom;
    var Event = basis.dom.event;
    var Data = basis.data;

    var getter = Function.getter;

    var Button = basis.ui.button.Button;
    var ButtonPanel = basis.ui.button.ButtonPanel;

    function createBlock(header){
      return DOM.insert(DOM.get('demo-container'), DOM.createElement('.DemoBlock', DOM.createElement('H2', header)));
    }

    function alertCaption(){
      alert(this.caption);
    }

    var simpleButtonsBlock = createBlock('Simple Buttons');

    new Button({
      caption: 'Button1',
      click: alertCaption,
      container: simpleButtonsBlock
    });

    new Button({
      caption: 'Button2',
      click: alertCaption,
      disabled: true,
      container: simpleButtonsBlock
    });

    new ButtonPanel({
      childNodes: [
        {
          caption: 'Button3',
          click: alertCaption
        },
        {
          caption: 'Button4',
          click: alertCaption
        },
        {
          caption: 'Button5',
          click: alertCaption,
          disabled: true
        },
        {
          caption: 'disable/enable button5',
          click: function(){
            if (this.previousSibling.disabled)
              this.previousSibling.enable();
            else
              this.previousSibling.disable();
          }
        }
      ],
      container: createBlock('Button Panel')
    });

    new ButtonPanel({
      childNodes: [
        {
          caption: 'Button7',
          click: alertCaption,
          groupId: 1
        },
        {
          caption: 'Button8',
          click: alertCaption,
          disabled: true,
          groupId: 1
        },
        {
          caption: 'Button9',
          click: alertCaption,
          groupId: 2
        },
        {
          caption: 'Middle 9-10',
          click: alertCaption,
          groupId: 2
        },
        {
          caption: 'Button10',
          click: alertCaption,
          groupId: 2
        },
        {
          caption: 'Button11',
          click: alertCaption,
          disabled: true,
          groupId: 3
        }
      ],
      container: createBlock('Button Panel with Grouping')
    });

    new ButtonPanel({
      childNodes: [
        {
          cssClassName: 'imageLeft',
          caption: 'Button12',
          click: alertCaption
        },
        {
          cssClassName: 'imageRight',
          caption: 'Button13',
          click: alertCaption
        },
        {
          cssClassName: 'imageOnly',
          caption: 'Button14',
          click: alertCaption
        },
        {
          caption: String.fromCharCode(8592),
          click: alertCaption
        }
      ],
      container: createBlock('Buttons with Image')
    });

    new ButtonPanel({
      childNodes: [
        {
          cssClassName: 'big',
          caption: 'Button15',
          click: alertCaption
        }
      ],
      container: createBlock('Big Button')
    });

    var button16Container = createBlock('Button with 50% Width');
    basis.dom.insert(button16Container, basis.dom.createElement('[style="width: 50%; font-size: 10px; text-align: center; margin-bottom: 3px;"]', basis.dom.createElement('[style="border: solid #666; border-width: 2px 1px 0; color: black;"]', '50%')));
    new Button({
      caption: 'Button16',
      click: alertCaption,
      cssClassName: 'fixedWidthButton',
      container: button16Container
    });

  </script>
</body>

</html>
